﻿<!DOCTYPE HTML>
<html th:with="title='分类管理'">
<head th:include="fragments/header :: header">
</head>
<body id="app">

	<div class="row cl">
		<label class="form-label col-xs-6 col-sm-6">
			<div class="page-container">
				<form action="/manager/hot/sendRed" method="post" class="form form-horizontal" id="red-form">
					<div class="row cl">
						<label class="form-label col-xs-4 col-sm-3">投放时间：</label>
						<div class="formControls col-xs-4 col-sm-4">
							<input type="text" class="input-text size-S laydate-icon" th:value="${lastDay}" style="width: 150px;" onclick="laydate({istime: true, format: 'YYYY-MM-DD hh:mm:ss', start: laydate.now(-1),  min: laydate.now(-180), max: laydate.now(30)})" id="daybegin" name="startTime">
							-
							<input type="text" class="input-text size-S laydate-icon" th:value="${lastDay}" style="width: 150px;" onclick="laydate({istime: true, format: 'YYYY-MM-DD hh:mm:ss', start: laydate.now(-1),  min: laydate.now(-180), max: laydate.now(30)})" id="dayend" name="endTime">
						</div>
					</div>
					<div class="row cl">
						<label class="form-label col-xs-4 col-sm-3">备注：</label>
						<div class="formControls col-xs-2 col-sm-2">
							<input type="text" class="input-text size-S" id="remark" name="remark">
						</div>
					</div>

					<div class="row cl">
						<div class="text-c">
							<input class="btn btn-primary size-S radius mr-10" style='margin-right: 41%;' type="button" value="投放" onclick="batchPut()">
						</div>
					</div>
				</form>
			</div>

		</label>
		<div class="formControls col-xs-6 col-sm-6"></div>
	</div>
	<!-- 	<div class="row cl"> -->
	<label class="form-label col-xs-6 col-sm-6">
		<div class="page-container">
			<div class="text-l pd-5">
				设备名称：
				<input type="text" class="input-text size-M" style="width: 150px" placeholder="请输入设备名称" id="deviceName" name="deviceName">
				模板名称：
				<input type="text" class="input-text size-M" style="width: 150px" placeholder="请输入模板名称" id="appTemplate" name="appTemplate">
				区域:
				<input type="text" class="input-text size-M" style="width: 150px" placeholder="请输入区域名称" id="address" name="address">
				<button type="button" class="btn btn-success size-S radius" onclick="query()">
					<i class="Hui-iconfont">&#xe665;</i>
					查询
				</button>
			</div>
			<div>
				<table class="table table-border table-bordered table-hover table-bg table-sort">
					<thead>
						<tr class="text-c">
							<th width="25"></th>
							<th width="100">mac地址</th>
							<th width="100">设备名称</th>
							<th width="100">设备位置</th>
							<th width="100">在线状态</th>
							<th width="100">模板</th>
							<th width="100">归属用户</th>
						</tr>
					</thead>
					<tbody>
						<tr class="text-c" v-for="item in pageData.rows" onclick="changeBox('{{ item.appTemplate.id }}','{{ item.id }}','{{ item.appTemplate.templateType.templateTypeSn }}')">
							<td>
								<input type="checkbox" value="{{ item.id }}" name="ids">
							</td>
							<td>{{ item.sn }}</td>
							<td>{{ item.deviceName }}</td>
							<td>{{ item.address }}</td>
							<td>{{ item.imstatus|deviceIMStateFilter}}</td>
							<td>{{ item.appTemplate.name}}</td>
							<td>{{ item.user.name }}({{ item.user.loginName }})</td>
						</tr>
					</tbody>
				</table>

				<div v-show="pageData.total > 0" class="laypage_main laypageskin_default" style="margin-top: 10px">
					<div class="l">
						<span>
							每页
							<select name="pageSizeSelect" id="pageSizeSelect" style="vertical-align: baseline !important; height: 27.6px;" onchange="query()">
								<option value="10" selected="selected">10</option>
								<option value="25">25</option>
								<option value="50">50</option>
								<option value="100">100</option>
							</select>
							条 显示 {{pageData.rowIndexStart}} 到 {{pageData.rowIndexEnd}} ，共 {{pageData.total}} 条
						</span>
					</div>
					<div id="pageNav" class="r"></div>
				</div>

			</div>
		</div>
	</label>
	<label class="form-label col-xs-6 col-sm-6">
		<div class="page-container">
			<div class="text-l pd-5">
				广告名称：
				<input type="text" class="input-text size-M" style="width: 150px" placeholder="请输入商品名称" id="pname" name="pname">
				商家名称：
				<input type="text" class="input-text size-M" style="width: 150px" placeholder="请输入商品名称" id="adBusinessName" name="adBusinessName">
				<button type="button" class="btn btn-success size-S radius" onclick="productquery()">
					<i class="Hui-iconfont">&#xe665;</i>
					查询
				</button>
			</div>
			<div>
				<table class="table table-border table-bordered table-hover table-bg table-sort">
					<thead>
						<tr class="text-c">
							<th width="25">
								<input type="checkbox" name="" value="" />
							</th>
							<th width="100">广告名称</th>
							<th width="100">商家名称</th>
							<th width="100">广告类型</th>
							<th width="100">归属用户</th>
						</tr>
					</thead>
					<tbody>
						<tr class="text-c" v-for="item in productpageData.rows" onclick="adsBox('{{ item.id }}')">
							<td>
								<input type="checkbox" value="{{ item.id }}" name="pids">
							</td>
							<td>{{ item.adName }}</td>
							<td>{{ item.adBusinessName }}</td>
							<td>{{ item.adsType|adsTypeFilter }}</td>
							
							<td>{{ item.user.name }}({{ item.user.loginName }})</td>
						</tr>
					</tbody>
				</table>

				<div v-show="productpageData.total > 0" class="laypage_main laypageskin_default" style="margin-top: 10px">
					<div class="l">
						<span>
							每页
							<select name="productpageSizeSelect" id="productpageSizeSelect" style="vertical-align: baseline !important; height: 27.6px;" onchange="productquery()">
								<option value="10" selected="selected">10</option>
								<option value="25">25</option>
								<option value="50">50</option>
								<option value="100">100</option>
							</select>
							条 显示 {{productpageData.rowIndexStart}} 到 {{productpageData.rowIndexEnd}} ，共 {{productpageData.total}} 条
						</span>
					</div>
					<div id="ppageNav" class="r"></div>
				</div>

			</div>
		</div>
	</label>
	<script type="text/javascript">
	var templateid;
			// ==================================================
			var app = new Vue({
				el : '#app',
				data : {
					pageData : {},
					productpageData : {},
				}
			});
			function changeBox(apptemplateid, deviceid, templateTypeSn){
				//获取到设备对应的广告后自动选中checkbox
				var cbxs = $("input[name='ids']");
				 for(var i=0;i<cbxs.length;i++){
		                var val = cbxs[i].value;
		                if(deviceid == val){
		                	cbxs[i].checked=true;
		                }else{
		                	cbxs[i].checked=false;
		                }
		             }
				 templateid = apptemplateid;
				 productquery('','',apptemplateid,templateTypeSn);
			}
			function adsBox(adsid){
				//获取到设备对应的广告后自动选中checkbox
				var cbxs = $("input[name='pids']");
				 for(var i=0;i<cbxs.length;i++){
		                var val = cbxs[i].value;
		                if(adsid == val){
		                	if(cbxs[i].checked){
		                		cbxs[i].checked=false
		                	}else{
		                		cbxs[i].checked=true
		                	}
		                }
		             }
			}
			/*
			 * 查询
			 */
			function productquery(pageNo, pageSize,apptemplateid,templateTypeSn) {
				if (!pageNo) {
					pageNo = 1;
				}
				if (!pageSize) {
					pageSize = $("#productpageSizeSelect").val();
				}
				if(!apptemplateid){
					apptemplateid = templateid;
				}
				var tip = layer.load(0, {
					shade : false
				});
				$.ajax({
					type : "POST",
					url : '/manager/ads/queryPage',
					data : {
						pageNo : pageNo,
						pageSize : pageSize,
						search_LIKE_adName : $("#pname").val(),
						search_LIKE_adBusinessName : $("#adBusinessName").val(),
						search_EQ_appTemplate_id : apptemplateid
					},
					beforeSend : function() {
					},
					complete : function() {
						layer.close(tip);
					},
					error : function(request) {
						layer.alert("系统错误");
					},
					success : function(result) {
						if (result.status == 0) {
							var data = result.data;
							 app.productpageData = data;
							if(data.rows.length == 0 ){
								if(templateTypeSn == "001"){
									layer.alert("暂无对应广告，去添加？", function(index) {
										layer.close(index);
										layer_show('新增图片广告', '/manager/ads/advertAdd', '', '450');
									});
								}
								if(templateTypeSn == "002"){
									layer.alert("暂无对应广告，去添加？", function(index) {
										layer.close(index);
										layer_show('新增视频广告', '/manager/ads/videoAdd', '', '450');
									});
								}
								if(templateTypeSn == "003"){
									layer.alert("暂无对应广告，去添加？", function(index) {
										layer.close(index);
										layer_show('新增房产汽车广告', '/manager/ads/houseCarAdd', '', '450');
									});
								}
								if(templateTypeSn == "004"){
									layer.alert("暂无对应广告，去添加？", function(index) {
										layer.close(index);
										layer_full('新增优惠券', '/manager/ads/couponAdd', '', '450');
									});
								}
							}
							laypage({
								cont : 'ppageNav',
								pages : data.totalPage,
								curr : data.currentPage,
								skip : true,
								groups : 6,
								jump : function(obj, first) {
									if (!first) {
										productquery(obj.curr);
									}
								}
							});
						} else {
							sessionCheckTimeOut(result);
						}
					}
				});
			}
			/**
			 * 全反选
			 */
			/* function checkAllp(){
			 var value=$("#ischecked").val();
			 var flag=false
			 if(value=="true"){
			 flag=true;
			 }
			
			 $('input[name="pids"]').attr("checked",flag); 
			 if(flag){
			 $("#ischecked").val(false);
			
			 }else{
			 $("#ischecked").val(true);
			 }
			 }
			 */
			/*
			 * 查询
			 */
			function query(pageNo, pageSize) {
				if (!pageNo) {
					pageNo = 1;
				}
				if (!pageSize) {
					pageSize = $("#pageSizeSelect").val();
				}
				var tip = layer.load(0, {
					shade : false
				});
				$.ajax({
					type : "POST",
					url : '/manager/device/queryPage',
					data : {
						pageNo : pageNo,
						pageSize : pageSize,
						search_LIKE_deviceName : $('#deviceName').val(),
						search_LIKE_appTemplate_name : $('#appTemplate').val(),
						search_LIKE_address : $('#address').val(),
						search_EQ_status : "passApproval",
                        search_IN_templateTypeSn : "001,003",
					},
					beforeSend : function() {
					},
					complete : function() {
						layer.close(tip);
					},
					error : function(request) {
						layer.alert("系统错误");
					},
					success : function(result) {
						if (result.status == 0) {
							var data = result.data;
							app.pageData = data;
							laypage({
								cont : 'pageNav',
								pages : data.totalPage,
								curr : data.currentPage,
								skip : true,
								groups : 6,
								jump : function(obj, first) {
									if (!first) {
										query(obj.curr);
									}
								}
							});
						} else {
							sessionCheckTimeOut(result);
						}
					}
				});
			}

			/**
			 * 批量投放
			 */
			var batchPut = function() {

				var daybegin = $("#daybegin").val();
				var dayend = $("#dayend").val();
				if(daybegin > dayend){
					layer.alert("结束时间不能小于开始时间！");
					return
				}
				var selectdItems = $(":checkbox[name=ids]:checked");
				if (selectdItems.size() == 0) {
					layer.alert("请选择被投放的设备！");
					return;
				}
				var ids = [];
				selectdItems.each(function() {
					ids.push($(this).val());
				});

				var selectdpItems = $(":checkbox[name=pids]:checked");
				if (selectdpItems.size() == 0) {
					layer.alert("请选择要投放的商品！");
					return;
				}
				var pids = [];
				selectdpItems.each(function() {
					pids.push($(this).val());
				});

				var tipIndex = null;
				$.ajax({
					type : "POST",
					url : '/manager/deviceadsrecord/addRecord',
					data : {
						ids : ids,
						pids : pids,
						startTime : $("#daybegin").val(),
						endTime : $("#dayend").val(),
						remark : $("#remark").val()

					},
					beforeSend : function() {
						tipIndex = layer.load(0, {
							shade : false
						});
					},
					complete : function() {
						layer.close(tipIndex);
					},
					error : function(request) {
						layer.alert("系统出错");
					},
					success : function(data) {
						layer.alert(data.message+",重启设备立即生效");
						if (data.status == 0) {
							query();
						}
					}
				});
			};
			$(function() {
				query();
			});
		</script>
</body>
</html>